<template>
  <div>
    <!--<x-header :left-options="{showBack: false}" style="background-color: #1D1C1E;color:#999999;font-size: 17px;">我的</x-header>-->
    <div>
      <div class="mine-bg">
        <div style="text-align: center; padding-top: 40px;">
          <img :src="avatar" style="width: 80px;height: 80px;border-radius: 50%;display: block;margin: 0 auto;"/>
          <h4>{{nickname}}</h4>
        </div>
      </div>
    </div>

    <div style="padding: 10px 0 10px 10px;">
      <div @click="myOrder()"
           style="display: flex;border-bottom: 1px solid #222225;position: relative;height: 49px;line-height: 49px;align-items: center;"
           class="right-arrow">
        <img slot="icon" style="display:block;margin-right:5px;width: 22px;height: 22px;"
             src="../assets/mine-order.png">
        <div>我的预约</div>
      </div>

      <a href="tel:0579-83589898"
         style="display: flex;border-bottom: 1px solid #222225;position: relative;height: 49px;line-height: 49px;align-items: center;"
         class="right-arrow">
        <img slot="icon" style="display:block;margin-right:5px;width: 22px;height: 22px;"
             src="../assets/tel.png">
        <div>联系我们</div>
      </a>
    </div>
    <img src="../assets/mine-log.png" style="width: 110px;height: 110px;display: block;margin: 40px auto;">


    <tabbar style="position: fixed;background-color: #1D1C1E;">
      <tabbar-item link="/">
        <img slot="icon" src="../assets/home-normal.png">
        <img slot="icon-active" src="../assets/home-sel.png">
        <span slot="label">预约看房</span>
      </tabbar-item>
      <tabbar-item selected>
        <img slot="icon" src="../assets/mine.png">
        <img slot="icon-active" src="../assets/mine-selected.png">
        <span slot="label" style="color: #E7B986">我的</span>
      </tabbar-item>
    </tabbar>
  </div>

</template>

<script>
  import {Tabbar, TabbarItem, Flexbox, FlexboxItem} from 'vux'

  export default {
    name: 'mine',
    components: {
      Tabbar,
      TabbarItem,
      Flexbox,
      FlexboxItem
    },
    data() {
      return {
        avatar: '',
        nickname: ''
      }
    },
    created() {
      let that = this
      document.title = '我的'
      if (that.$Cookies.get('avatar') && that.$Cookies.get('nickname')) {
        that.avatar = that.$Cookies.get('avatar')
        that.nickname = that.$Cookies.get('nickname')
      } else {
        that.$http.post('user/info', {}).then(data => {
          console.log(data)
          that.avatar = data.data.data.avatar
          that.nickname = data.data.data.nickname
        })
      }
    },
    methods: {
      myOrder: function () {
        this.$router.push({path: '/myOrder'})
      }
    }

  }
</script>

<style scoped>
  .mine-bg {
    background: url("../assets/bg.png") no-repeat center center;
    height: 180px;
    width: 100%;
    background-size: cover;
  }

  .weui-tabbar:before{
    border-top: 0 !important;
  }

</style>
